<template>
    <div>
        <mt-header :title="longTitle" style="font-size: 20px">
            <router-link to="/merchantAccount" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="search box space-between vertical-center">
            <input type="text" class="search_input" :placeholder="branchData" :value="branchInput"
                   @input="inputDataChange($event)"/>
            <div class="search_click" @click="searchBranch">搜索</div>

        </div>
        <comList :branchList="branchListData" @branchListClick="BranchCode"></comList>
    </div>
</template>

<script>
    import {Header} from 'mint-ui';
    import searchBranch from "../store/modules/searchBranch";
    import comList from '@/components/com-List.vue'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {GET_BANK_BRANCH} from '../store/types'

    export default {
        name: "searchBranch",
        components: {
            Header,
            comList
        },
        data() {
            return {
                longTitle: '搜索银行',
                branchData: '支行关键词'
            };
        },
        computed: {
            ...mapState('searchBranch', ['branchInput','branchListData']),
        },
        methods: {
            ...mapMutations('searchBranch', ['getInputDataChange']),
            ...mapActions('searchBranch', [GET_BANK_BRANCH,'getBranchCode']),
            searchBranch() {
                this.GET_BANK_BRANCH()
            },
            inputDataChange(event) {
                let value = event.target.value;
                this.getInputDataChange(value)
            },
            BranchCode(value){
                this.getBranchCode(value)
            },
        },

    }
</script>

<style scoped>
    .search {
        background: #26a2ff;
        width: 100%;
        height: 50px;
        color: #F6F6F6;
    }

    .search_input {
        border-radius: 20px;
        border: 1px solid #55beff;
        height: 25px;
        background: #55beff;
        padding-left: 15px;
        margin-left: 10px;
        outline: none;
       display: block;
        -webkit-box-flex: 1;
        color:#F6F6F6;
        caret-color:black;
    }

    .search_click {
        padding-right: 20px;
        width: 50px;
        margin-left: 30px
    }

    input::-webkit-input-placeholder {
        color: #F6F6F6;
    }

    input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #F6F6F6;
    }

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #F6F6F6;
    }

    input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #F6F6F6;
    }
</style>